<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>个人信息页面</title>
		<meta name="viewport" content="width=640,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/common/common.css" />
		<link rel="stylesheet" type="text/css" href="css/my_animate.css" />
		<link rel="stylesheet" type="text/css" href="css/info.css" />
	</head>

	<body>
		<div class="web">
			<div class="yinye rotate360">
				<img src="images/index/music_ico.png" />
			</div>
			<audio src="audio/1.mp3" class="audio" autoplay="autoplay" loop="loop"></audio>
			<!--成功提交遮罩-->
			<div class="mask hid tijiao_mask">
				<div class="mask_content">
					<div class="delete">
						<img src="images/index/close.png" />
					</div>
					<div class="text">
						<p>提交成功！</p>
					</div>
					<a href="ranking.html">
						<div class="btn">
							查看排行榜
						</div>
					</a>
				</div>
			</div>
			<!--失败提交遮罩-->
			<div class="mask hid stijiao_mask">
				<div class="mask_content">
					<div class="delete">
						<img src="images/index/close.png" />
					</div>
					<div class="text">
						<p>信息有误</p>
					</div>
				</div>
			</div>
			<div class="info_cover">
				<div class="info_cover_cont">
					<div class="info_cover_close">X</div>
					<div class="info_cover_check">查看我的排名</div>
				</div>
			</div>
			<div class="info_top">
				<p class="fir">填写囍宴主人信息</p>
				<div><span class="zb">真实姓名</span><em ></em>
					<span class="yb name"></span>
				</div>
				<div><span class="zb">联系电话</span><em></em>
					<span class="yb phone"></span>
				</div>
				<div>
					<span class="zb">囍宴举办地点</span><em></em>
					<select>
						<option>广东省</option>
						<option>海南省</option>
					</select>
				</div>
				<div>
					<span class="zb">囍宴举办日期</span><em></em>
					<select>
						<option>10月1日</option>
						<option>10月2日</option>
						<option>10月3日</option>
						<option>10月4日</option>
						<option>10月5日</option>
						<option>10月6日</option>
						<option>10月7日</option>
					</select>
				</div>
			</div>
			<div class="info_bot">
				<p>只有于2016年1月1日后进行婚姻登记</p>
				<p>并在2016年10月1日——10月7日举办婚宴的新人</p>
				<p>（限广东省、海南省区域）才能入榜噢！</p>
				<div class="info_btn">
					<div class="btn_mask"></div>
					<img src="images/info/info_btn.png" />
				</div>
			</div>
			<div class="index">
				<a href="index.html">
					<img src="images/common/home.png" />
				</a>
			</div>
		</div>
		<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.transit.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//判断是否满足提交条件（提交按钮）
			(function() {
				$(".name").on("touchend",function () {
					var nameText = prompt("请输入姓名");
					$(this).html(nameText);
				})
				$(".phone").on("touchend",function () {
					var phoneText = prompt("请输入手机号码");
					if(!(/^1[34578]\d{9}$/.test(phoneText))) {
						alert("手机号码有误，请重新输入");
					} else {
						$(this).html(phoneText);
					}
				})
				$(".info_btn").on("touchend", function() {
					if ($(".name").html()!=""&&/^1[34578]\d{9}$/.test($(".phone").html())) {
						
						mask($(".tijiao_mask"),$(".tijiao_mask .mask_content"))
					}else{
						mask($(".stijiao_mask"),$(".stijiao_mask .mask_content"))
					}
				})
				$(".tijiao_mask .delete").on("touchend", function() {
					$(".tijiao_mask").fadeOut(1000)
				})
				$(".stijiao_mask .delete").on("touchend", function() {
					$(".stijiao_mask").fadeOut(1000)
				})
			})();
			//动画效果
			$(".info_top div").animate({ "width": "50%" }, 1000)
		</script>
	</body>

</html>